<template>
  <el-dialog :title="title" :visible="isShow" top="8vh" @close="close">
    <div class="from">
      <el-form label-width="100px" class="demo-ruleForm" :model="formData">
        <el-form-item label="权限组类型">
          <el-radio-group v-model="formData.is_point">
            <el-radio :label="false">菜单</el-radio>
            <el-radio :label="true">权限点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称" :label-width="formLabelWidth" class="f-box">
          <el-input v-model="formData.pid" class="tree-input" @focus="treeBoxShow = true" />
          <transition name="treebox">
            <div v-show="treeBoxShow" class="tree-box">
              <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
          </transition>
        </el-form-item>
        <el-form-item label="权限代码" :label-width="formLabelWidth">
          <el-input v-model="formData.code" class="input-text" />
        </el-form-item>
        <el-form-item label="权限标题" :label-width="formLabelWidth">
          <el-input v-model="formData.title" class="input-text" />
        </el-form-item>
      </el-form>
    </div>
    <div class="button">
      <el-button v-if="isSet" type="primary" size="small" @click="setMenu">确认修改</el-button>
      <el-button v-else type="primary" size="small" @click="addMenu">立即创建</el-button>
      <el-button size="small" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addMenus, emitMenusListAPI } from '@/api/menus'
export default {
  props: {
    // 是否显示弹窗
    isShow: {
      type: Boolean,
      default: false
    },
    isSet: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    treeList: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {
        return {
          code: '',
          is_point: '',
          pid: '1',
          title: ''
        }
      }
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'Childs',
        label: 'title'
      },
      formLabelWidth: '100px',
      treeBoxShow: false
    }
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit('update:isShow', false)
    },
    handleNodeClick(val) {
      this.formData.pid = val.id
      this.treeBoxShow = false
    },
    // 添加
    async  addMenu() {
      try {
        await addMenus(this.formData)
        this.$emit('getmenuTree')
        this.close()
        this.$message.success('添加成功')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 修改菜单
    async setMenu() {
      try {
        await emitMenusListAPI(this.formData)
        this.$emit('getmenuTree')
        this.close()
        this.$message.success('修改成功')
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

  <style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    background-color: #409eff;
    color: white;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .el-dialog__close {
    color: white;
  }

  .from {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .input-text {
    width: 300px;
  }

  .button {
    display: flex;
    justify-content: right
  }

  .f-box {
    position: relative;
  }

  .tree-input {
    width: 200px
  }

  .tree-box {
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    position: absolute;
    top: 100%;
    left: 0%;
    width: 200px;
    max-height: 300px;
    z-index: 100;
    border-radius: 7px;
    border: 1px solid #ccc;
    opacity: 1;

    .el-tree {
      border-radius: 7px;
    }

    .tree-box::-webkit-scrollbar {
      display: none;
    }

    &.treebox-enter {
      opacity: 0;
    }

    &.treebox-enter-active {
      transition: all 0.2s ease;
    }

    &.treebox-leave-active {
      transition: all 0.2s ease;
    }

    &.treebox-leave-to {
      opacity: 0;
    }
  }
  </style>

